import {Avatar, Button, Card, Descriptions, Image, List, message, Row, Tabs} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {goto, isSuccess} from "@/utils/utils";
import {WorksManager} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";
import styles from './style.less';

export const contentDetailAudit = async (businessId: number, auditOperate: string = 'PASS', remark: string = '',
                                  flowType: "WORKS_AUDIT" | "ARTICLE_AUDIT", callBack: Function) => {
  try {
    if (isSuccess((await WorksManager.audit({
      businessId,
      auditOperate,
      remark,
      flowType
    }))?.code)) {
      message.success(auditOperate === SYS_ENUMS.RESOURCE_AUDIT_STATE.PASS.value ? '审核通过' : '审核拒绝');
      callBack?.()
      return true;
    }
    return false
  } catch (error) {
    return false;
  }
};

const WorkDetail: React.FC<any> = ({match: {params: {id}}}) => {

  const [work, setWork] = useState<any>(undefined)
  const [auditLogs, setAuditLogs] = useState<any[]>([])

  const queryWorkDetail = (id: number)=>{
    if(id){
      WorksManager.worksDetail(id).then(({code, data}) => {
        if (isSuccess(code)) {
          setWork(data)
        }
      })

      WorksManager.worksLog(id).then(({code, data}) => {
        if (isSuccess(code)) {
          setAuditLogs(data??[])
        }
      })
    }
  }

  useEffect(() => {
    queryWorkDetail(id)
  }, [id])

  return (
    <PageContainer>
      <Card bordered={false}
            actions={work?.auditState==='ING'?[<span></span>, <span></span>,
              <span style={{float: 'right', paddingRight: 17}}>
                <Button style={{marginRight: 17}}
                        onClick={() => contentDetailAudit(work?.id, SYS_ENUMS.RESOURCE_AUDIT_STATE.REFUSE.value,
                          "", "WORKS_AUDIT", () => queryWorkDetail(id))}>驳回</Button>
                <Button type='primary'
                        onClick={() => contentDetailAudit(work?.id, SYS_ENUMS.RESOURCE_AUDIT_STATE.PASS.value, "",
                          "WORKS_AUDIT", () => queryWorkDetail(id))}>通过</Button>
              </span>] : []}>
        <Tabs destroyInactiveTabPane={true} tabBarExtraContent={<Button type='primary' onClick={() => goto(`/work/edit/${id}`)}>编辑</Button>}>
          <Tabs.TabPane forceRender tab='作品信息' key="WORK_BASIC_INFO">
            <Descriptions title="基本信息" style={{ marginBottom: 32 }}>
              <Descriptions.Item label="作品ID">{id}</Descriptions.Item>
              <Descriptions.Item label="作品标题">{work?.title}</Descriptions.Item>
              <Descriptions.Item label="所属设计师">{work?.userDto.nickName}</Descriptions.Item>
              <Descriptions.Item label="原创分类">{work?.worksNature?SYS_ENUMS.WORKS_NATURE[work?.worksNature]?.label:'-'}</Descriptions.Item>
              <Descriptions.Item label="原文链接">{work?.originalUrl}</Descriptions.Item>
              <Descriptions.Item label="版权声明">{work?.copyrightType?SYS_ENUMS.COPYRIGHT_TYPE[work?.copyrightType]?.label:'-'}</Descriptions.Item>
              <Descriptions.Item label="标签">
                {
                  work?.labelList?.map((tag: any, index: number) => `${index > 0 ? ',' : ''}${tag?.name}`)
                }
              </Descriptions.Item>
              <Descriptions.Item label="审核状态">{work?.auditState?SYS_ENUMS.RESOURCE_AUDIT_STATE[work?.auditState]?.label:'-'}</Descriptions.Item>
              <Descriptions.Item label="是否推荐">{work?.recommend?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="是否置顶">{work?.headFixed?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="关联资源/文章">{work?.userDto.nickName}</Descriptions.Item>
              <Descriptions.Item label="作品字数">{work?.worksContentSize}</Descriptions.Item>
              <Descriptions.Item label="作品图片数">{work?.worksImgSize}</Descriptions.Item>
              <Descriptions.Item label="编辑时间">{work?.gmtModified}</Descriptions.Item>
              <Descriptions.Item label="发布时间">{work?.gmtCreate}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="数据统计" style={{ marginBottom: 32 }}>
              <Descriptions.Item label="浏览量">{work?.browseNum}</Descriptions.Item>
              <Descriptions.Item label="点赞数量">{work?.greatNum}</Descriptions.Item>
              <Descriptions.Item label="评论数量">{work?.replyNum}</Descriptions.Item>
              <Descriptions.Item label="收藏数量">{work?.focusNum}</Descriptions.Item>
              <Descriptions.Item label="分享数量">{work?.shareNum}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="详细内容" style={{ marginBottom: 32 }} column={1}>
              <div>{work?.worksContent}</div>
              {work?.content?.map((img: any)=><Row key={img.key}>
                <Image src={img.url} title={img.name}/>
              </Row>)}
            </Descriptions>
          </Tabs.TabPane>
          <Tabs.TabPane forceRender tab='审核日志' key="WORK_AUDIT_LOG">
            <div className={styles.title}>操作日志</div>
            <List
              itemLayout="horizontal"
              dataSource={auditLogs}
              renderItem={({userDto, gmtCreate, auditRemark, type}) => <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={userDto?.avatarUrl} />}
                  title={userDto?.nickName}
                  description={`备注: ${auditRemark??'暂无'}`}
                />
                <div>{`${SYS_ENUMS.OPERATE_TYPE[type]?.label}   ${gmtCreate} `}</div>
              </List.Item>}
            />
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </PageContainer>
  );
};

export default WorkDetail;
